import React, { useImperativeHandle, useRef } from 'react'

export default React.forwardRef(function Test(props, appRef) {
  const testRef = useRef()
  // appRef就是app组件中创建的ref对象

  //   useImperativeHandle(ref对象, 回调函数)
  // useImperativeHandle的第一个参数传的是ref对象,目的是给这个ref对象的current属性天添加内容. 第二个参数是一个函数,函数的返回值是啥,则把这个内容就添加到appRef.current上面
  useImperativeHandle(appRef, () => {
    return {
      focus() {
        // 得到input获得焦点
        testRef.current.focus()
      },
    }
  })
  return (
    <div>
      Test
      <input type="text" ref={testRef} />
    </div>
  )
})
